<!--A Design by W3layouts
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>悦创·摄影站</title>
<!--meta tags -->
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="innovative-cv Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false);
		function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--//meta tags ends here-->
<!--booststrap-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" >
 
<!--//booststrap end-->

<!-- font-awesome icons -->
   <link href="css/font-awesome.css" rel="stylesheet"> 
<!-- //font-awesome icons -->
<!--stylesheets-->
<link href="css/style.css" rel='stylesheet' type='text/css' media="all">

<link href="css/circles.css" rel="stylesheet" type="text/css" media="all" > <!--skill-circles-->

<link rel="stylesheet" href="css/main.css">

<!--//style sheet end here-->
<link href="//fonts.googleapis.com/css?family=Raleway:300,400,500,600,700" rel="stylesheet">
</head>
<body>    

<div class="agileits_main">
	<div class="banner" id="home">
		<!-- menu -->
					<div id="toggle_m_nav">
			  <div id="m_nav_menu" class="m_nav">
				<div class="m_nav_ham" id="m_ham_1"></div>
				<div class="m_nav_ham" id="m_ham_2"></div>
				<div class="m_nav_ham" id="m_ham_3"></div>
			  </div>
			</div>

			<div id="m_nav_container" class="m_nav">
			  <ul id="m_nav_list" class="m_nav">
				<li class="m_nav_item" id="m_nav_item_1"> <a href="#home">Home</a> </li>
				<li class="m_nav_item" id="moble_nav_item_2"> <a href="#about">About</a> </li>
				<li class="m_nav_item" id="moble_nav_item_3"> <a href="#skills">Skills</a> </li>
				<li class="m_nav_item" id="moble_nav_item_4"> <a href="#portfolio">Portfolio</a> </li>
				<li class="m_nav_item" id="moble_nav_item_5"> <a href="#education">Qualification</a> </li>
				<li class="m_nav_item" id="moble_nav_item_6"> <a href="#contact">Contact</a> </li>
			  </ul>
			</div>
		<!-- menu -->
		<div class="container">
			<div class="agile-logo">
				<h1><a href="index.html">AI悦创-<span>cv</span></a></h1>
			</div>
			</div>
			</div>
			<!-- banner -->
<div class="w3_banner" >
	<div class="container">
		<div class="slider">
			<div class="callbacks_container">
			   <ul class="rslides callbacks callbacks1" id="slider4">
					<li>	
						<div class="banner_text_w3layouts">
							<h3>HI I AM WALLY WEST.</h3>
							<span> </span>
							<p>I love the people I
photograph </p>
						</div>
					</li>
					 <li>	
						<div class="banner_text_w3layouts">
							<h3>I LOVE PHOTOGRAPHY.</h3>
							<span> </span>
							<p>I Photograph Models and Nature </p>
						</div>
					</li>
					 <li>	
						<div class="banner_text_w3layouts">
							<h3>CHECK OUT MY PROFILE</h3>
							<span> </span>
							<p>Gallery </p>
						</div>
					</li>
				</ul>
			</div>

	   </div>
	</div>   
</div>	
<!-- //banner -->
		</div>	
			<!-- //header --> 
	<!-- about -->
	<div class="about" id="about">
		<div class="container">
			<div class="w3ls-titlew3l">
				<h3>About Me</h3>
			</div>
			<div class="about-agileinfo"> 
				<div class="col-md-4 col-sm-4 about-left ">
					<img src="images/bio.jpg" class="img-responsive" alt=""/>
				</div> 
				<div class="col-md-8 col-sm-8 about-right wthree"> 
					<h2>Hi, i'm <span>AiYuechuang </span></h2>
					<h4>photographer</h4>
					<ul class="address">
						<li>
							<ul class="agileits-address-text ">
								<li><b>D.O.B :</b></li>
								<li>26-11-19997</li>
							</ul>
						</li>
						<li>
							<ul class="agileits-address-text">
								<li><b>PHONE : </b></li>
								<li>+80 180 5957 2160</li>
							</ul>
						</li>
						<li>
							<ul class="agileits-address-text">
								<li><b>ADDRESS :</b></li>
								<li>福建省厦门市集美区厦门工学院</li>
							</ul>
						</li>
						<li>
							<ul class="agileits-address-text">
								<li><b>E-MAIL :</b></li>
								<li><a href="mailto:aiyuechuang@gmail.com"> aiyuechuang@gmail.com</a></li>
							</ul>
						</li>
						<li>
							<ul class="agileits-address-text">
								<li><b>WEBSITE :</b></li>
								<li><a href="https://www.aiyc.top"> www.aiyc.top</a></li>
							</ul>
						</li>
					</ul> 
					<div class="social-wthree-icons">
						
							<span class="fa fa-facebook icon" aria-hidden="true"> </span>
							<span class="fa fa-twitter icon" aria-hidden="true"> </span>
							<span class="fa fa-google-plus icon"  aria-hidden="true"></span>
							<span class="fa fa-dribbble icon" aria-hidden="true"></span>
						<div class="clearfix"> </div>
					</div> 
					<div class="hire-w3lgrids">
						<a href="#" class="wthree-more nina" data-text="DOWNLOAD CV"> 
							<span>D</span><span>o</span><span>w</span><span>n</span><span>l</span><span>o</span><span>a</span><span>d</span> <span>c</span><span>v</span>					
						</a> 
						<a href="#" class="wthree-more w3more1 nina" data-text="hire me"> 
							<span>h</span><span>i</span><span>r</span><span>e</span> <span>m</span><span>e</span>
						</a>
					</div>  
				</div> 
				<div class="clearfix"> </div> 

			</div> 
		</div>
	</div>
	<!-- //about -->
	<!-- skills -->
	<div class="about-skills" id="skills">
		<div class="container">
			<div class="w3ls-titlew3">
				<h3>My skills</h3>
			</div>

			<div class="skill-agileinfo">
		
				<div class="skill-grids">
					<div class="col-md-4 col-sm-4 skills-w3lsleft">
						<h4>Extra Skills</h4>
						<ul>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>Painting</li>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>writer</li>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>music</li>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>swimming</li>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>football</li>
							<li><span class="fa fa-check-square-o" aria-hidden="true"></span>cooking</li>

						</ul>
					</div>
					<div class="col-md-8 col-sm-8 skills-w3lsright">
						<h4>Technical Skills</h4>
						<div class="skillbar" data-percent="98">
							<span class="skillbar-title" style="background:#e08808;">Photographic</span>
							<p class="skillbar-bar" style="background: #ff9d0d;"></p>
							<span class="skill-bar-percent"></span>
						</div>
						<!-- End Skill Bar --> 
						<div class="skillbar" data-percent="99">
							<span class="skillbar-title" style="background:#0396d8;">Quality</span>
							<p class="skillbar-bar" style="background:#03A9F4;"></p>
							<span class="skill-bar-percent"></span>
						</div>
						<!-- End Skill Bar --> 
						<div class="skillbar" data-percent="95">
							<span class="skillbar-title" style="background:#9226a4;">Direction</span>
							<p class="skillbar-bar" style="background:#b32eca;"></p>
							<span class="skill-bar-percent"></span>
						</div>
						<!-- End Skill Bar --> 
						<div class="skillbar" data-percent="70">
							<span class="skillbar-title" style="background:#028679;">Edit</span>
							<p class="skillbar-bar" style="background: #009688;"></p>
							<span class="skill-bar-percent"></span>
						</div>
						<!-- End Skill Bar -->  
					</div>
					<div class="clearfix"></div>
				</div>

   
			</div> 
		</div> 
	</div>
	<!-- //skills -->
<!--start-->

<div class="count">
						<div class="cir_agile_info ">
									  <div class="skill-grids">
											<div class="skills-grid text-center">
												<div class="circle" id="circles-1"><div class="circles-wrp" style="position:relative; display:inline-block;"><svg width="160" height="160"><path fill="transparent" stroke="#ffffff" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 79.89582650464463 5.000072347482458 Z"></path><path fill="transparent" stroke="#fd9426" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 0 1 124.17351291284737 140.61106134146232 "></path></svg><div class="circles-text-wrp" style="position:absolute; top:0; left:0; text-align:center; width:100%; font-size:56px; height:160px; line-height:160px;"><span class="circles-number"><span class="circles-number">35</span></span><span class="circles-text">%</span></div></div></div>
												<p>Awards</p>
											</div>
											<div class="skills-grid text-center">
												<div class="circle" id="circles-2"><div class="circles-wrp" style="position:relative; display:inline-block;"><svg width="160" height="160"><path fill="transparent" stroke="#ffffff" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 79.89582650464463 5.000072347482458 Z"></path><path fill="transparent" stroke="#fc3158" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 80.05972450330499 154.9999762198876 "></path></svg><div class="circles-text-wrp" style="position:absolute; top:0; left:0; text-align:center; width:100%; font-size:56px; height:160px; line-height:160px;"><span class="circles-number"><span class="circles-number">45</span></span><span class="circles-text">%</span></div></div></div>
												<p>Projects</p>
											</div>
											<div class="skills-grid text-center">
												<div class="circle" id="circles-3"><div class="circles-wrp" style="position:relative;display:inline-block;"><svg width="160" height="160"><path fill="transparent" stroke="#ffffff" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 79.89582650464463 5.000072347482458 Z"></path><path fill="transparent" stroke="#53d769" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 35.98377886071055 140.7253841207873 "></path></svg><div class="circles-text-wrp" style="position:absolute; top:0; left:0; text-align:center; width:100%; font-size:56px; height:160px; line-height:160px;"><span class="circles-number"><span class="circles-number">55</span></span><span class="circles-text">%</span></div></div></div>
												
												<p>Followers</p>
											</div>
											<div class="skills-grid text-center">
												<div class="circle" id="circles-4"><div class="circles-wrp" style="position:relative; display:inline-block;"><svg width="160" height="160"><path fill="transparent" stroke="#ffffff" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 79.89582650464463 5.000072347482458 Z"></path><path fill="transparent" stroke="#147efb" stroke-width="10" d="M 79.98472450972287 5.000001555604044 A 75 75 0 1 1 8.704055142281334 103.27849322540312 "></path></svg><div class="circles-text-wrp" style="position:absolute; top:0; left:0; text-align:center; width:100%; font-size:56px; height:160px; line-height:160px;"><span class="circles-number"><span class="circles-number">65</span></span><span class="circles-text">%</span></div></div></div>
												<p>Happy clients</p>
											</div>
												
								
				
										 <div class="clearfix"></div>
										
								</div>
							</div>
                     </div>
	<!--//start-->

		<!-- gallery -->
		<div class="gallery" id="portfolio">
		   <div class="container">
			<div class="tittle-agileinfo">
				<h3>Portfolio</h3>
			</div>
			<div class="w3ls_banner_bottom_grids ">
				<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
					<ul id="myTab" class="nav nav-tabs" role="tablist">
						<li role="presentation" class="active"><a href="#designs" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Fashion</a></li>
						<li role="presentation"><a href="#Alterations" role="tab" id="Alterations-tab" data-toggle="tab" aria-controls="Alterations">Events</a></li>
						<li role="presentation"><a href="#Mending"  role="tab" id="Mending-tab" data-toggle="tab" aria-controls="Mending">Models</a></li>
					</ul>
					<div id="myTabContent" class="tab-content">
						<div role="tabpanel" class="tab-pane fade in active" id="designs" aria-labelledby="home-tab">
							<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-1.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-1.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-2.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-2.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
										
											</div>
										</div>
									</div>
								</a>
							</div>
											<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-3.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-3.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
											
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-4.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-4.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
									
											</div>
										</div>
									</div>
								</a>
							</div>
												<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-5.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-5.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
											
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-6.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-6.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
											
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-7.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-7.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
										
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/fashion-8.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/fashion-8.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Fashion</h4>
											
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="clearfix"> </div>
						</div>
						<div role="tabpanel" class="tab-pane fade" id="Alterations" aria-labelledby="Alterations-tab">
											<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/event-1.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/event-1.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
												<h4>Events</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/event-2.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/event-2.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Events</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/event-3.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/event-3.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
												<div class="wthree_text">
												<h4>Events</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/event-1.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/event-1.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Events</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="clearfix"> </div>
						</div>
						
						<div role="tabpanel" class="tab-pane fade" id="Mending" aria-labelledby="Mending-tab">
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-1.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-1.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-2.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-2.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
									<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-3.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-3.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-1.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-1.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-5.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-5.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
										<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
													<div class="col-md-3 w3layouts_gallery_grid">
								<a title="Portfolio" href="images/model-6.jpg">
									<div class="w3layouts_team_grid">
										<img src="images/model-6.jpg" alt=" " data-selector="img" class="img-responsive" />
										<div class="w3layouts_team_grid_pos">
											<div class="wthree_text">
												<h4>Model</h4>
											</div>
										</div>
									</div>
								</a>
							</div>
							<div class="clearfix"> </div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		<!-- //gallery -->


	<!-- education -->
	<div class="about-education" id="education">
		<div class="container">
			<div class="w3ls-title">
				<h3>Qualification</h3>
			</div>
			<div class="w3-agileits-expinfo">    
				<div class="experience-grids">
					<div class="experience-left">
						<h6>2010<span>(3 Years)</span> </h6>
						<h5> University Name</h5>
					</div>
					<div class="experience-right">
						<h4>Diploma of Graphic Design</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus reiciendis maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at</p>
					</div>
					<div class="clearfix"> </div>
				</div> 
				<div class="experience-grids experience-grids-btm">
					<div class="experience-left">
						<h6>2007<span>(3 Years)</span></h6>
						<h5> University Name</h5>
					</div>
					<div class="experience-right">
						<h4>Diploma in Photo Image</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus reiciendis maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at</p>
					</div>
					<div class="clearfix"> </div>
				</div>  
				<div class="experience-grids w3-agileits">
					<div class="experience-left">
						<h6>2006</h6>
						<h5> University Name</h5>
					</div>
					<div class="experience-right">
						<h4>Wild Photo Graphic</h4>
						<p>Itaque earum rerum hic tenetur a sapiente delectus reiciendis maiores alias Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rutrum iaculis enim, non convallis felis mattis at</p>
					</div>
					<div class="clearfix"> </div>
				</div> 
			</div>
		</div>
	</div>
	<!-- //education -->


	<!-- Booking -->
	<div class="w3layoutsbooking" id="contact">
		<div class="container">

			<h3>Send Project</h3>

			<div class="booking-form-aits">
				<form action="#" method="post">
					<input type="text" class="margin-right" Name="Name" placeholder="NAME" required="">
					<input type="email" Name="Email" placeholder="EMAIL" required="">
					<input type="text" class="margin-right" Name="Phone Number" placeholder="PHONE NUMBER" required="">
					<input type="text" Name="Place" placeholder="PLACE" required="">
					<textarea name="Message" placeholder="PROJECT DETAILS" required=""></textarea>
					<div class="send-button agileits w3layouts">
						<button class="btn btn-primary">SEND MESSAGE<span class="fa fa-long-arrow-right" aria-hidden="true"></span></button>
					</div>
				</form>
			</div>

		</div>
	</div>
	<!-- //Booking -->


	<!-- Footer -->
	<div class="footer">
		<div class="container">

			<h3>Contact</h3>
			

			<div class="footer-grids">
		   	  
				<div class="address">
					<h4>Address</h4>
				
							<p><span class="fa fa-map-marker"  aria-hidden="true"></span> 756 global Place</p>
						    <p><span class="fa fa-map-marker"  aria-hidden="true"></span>south pole,U.S.A</p>
						
				</div>

				<div class=" phone">
					<h4>Phone</h4>
					<p><span class="fa fa-phone" aria-hidden="true"></span> +1 (000) 123-4567</p>
					<p><span class="fa fa-phone" aria-hidden="true"></span> +1 (112) 562-7114</p>
				</div>
              
			   
				<div class=" email">
					<h4>Email</h4>
					<p><span class="fa fa-envelope"  aria-hidden="true"></span> <a href="mailto:mail@example.com" class="info"> info@example.com</a></p>
					<p><span class="fa fa-envelope"  aria-hidden="true"></span> <a href="mailto:mail@example.com" class="info"> info@photos.com</a></p>
				</div>

				<!-- Newsletter -->
				<div class="newsletter">
					<h4>Follow</h4>
					 <span class="fa fa-facebook font-icon" aria-hidden="true"> </span>
				     <span class="fa fa-twitter font-icon" aria-hidden="true"> </span>
					 <span class="fa fa-google-plus font-icon"  aria-hidden="true"> </span>
					 <span class="fa fa-dribbble font-icon" aria-hidden="true"> </span>
					
				</div>
				<!-- //Newsletter -->
				
				<div class="clearfix"></div>
				
			</div>

			<!-- Copyright -->
			<div class="copyright">
				<p>&copy; 2017 INNOVATIVE-cv . All Rights Reserved | Design by <a href="http://w3layouts.com/" target="_blank"> W3layouts </a><a href="#home" class="to-top scroll" title="To Top"><span class="fa fa-chevron-up"></span></a></p>
			</div>
			<!-- //Copyright -->

		</div>
	</div>
	<!-- //Footer -->




<script type='text/javascript' src='js/jquery-2.2.3.min.js'></script>
<!-- //js -->

<!--menu script-->
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>	

<!--Navbar-->
<script type="text/javascript" src="js/main.js"></script>
<!--//Navbar-->
<!--gallery -->
		<script src="js/jquery.chocolat.js"></script>
		<link rel="stylesheet" href="css/chocolat.css" type="text/css" media="screen">
		<!--light-box-files -->
		<script type="text/javascript">
			$(function () {
				$('.w3layouts_gallery_grid a').Chocolat();
			});
		</script>
		<!-- //gallery -->


		<!-- Skill Bar js --> 
	<script src="js/skill.bars.jquery.js"></script> 
	<script> 
	$(document).ready(function(){
		
		$('.skillbar').skillBars({
			from: 0,
			speed: 5000, 
			interval: 300,
			decimals: 0,
		});
		
	}); 
	</script> 
	<!-- //End Skill Bar js -->  
	<!-- /circle-->
	 <script type="text/javascript" src="js/circles.js"></script>
					         <script>
								var colors = [
										['#ffffff', '#e31de1'], ['#ffffff', '#51ffe8'],['#ffffff', '#0012bc'], ['#ffffff', '#bc000d']
									];
								for (var i = 1; i <= 7; i++) {
									var child = document.getElementById('circles-' + i),
										percentage = 25 + (i * 10);
										
									Circles.create({
										id:         child.id,
										percentage: percentage,
										radius:     80,
										width:      20,
										number:   	percentage / 1,
										text:       '%',
										colors:     colors[i - 1]
									});
								}
						
				</script>
	<!-- //circle -->
	<!-- start-smoth-scrolling -->
			<script type="text/javascript" src="js/move-top.js"></script>
			<script type="text/javascript" src="js/easing.js"></script>
			<script type="text/javascript">
				jQuery(document).ready(function($) {
					$(".scroll").click(function(event){		
						event.preventDefault();
						$('html,body').animate({scrollTop:$(this.hash).offset().top},3000);
					});
				});
			</script>
		<!-- start-smoth-scrolling -->

		<!-- Banner slider -->
		  <script src="js/responsiveslides.min.js"></script>
		  <script>
			// You can also use "$(window).load(function() {"
			$(function () {
			  // Slideshow 4
			  $("#slider4").responsiveSlides({
				auto: true,
				pager:true,
				nav:true,
				speed: 500,
				namespace: "callbacks",
				before: function () {
				  $('.events').append("<li>before event fired.</li>");
				},
				after: function () {
				  $('.events').append("<li>after event fired.</li>");
				}
			  });
		
			});
		
</script>
</body>
</html>